<template xmlns="http://www.w3.org/1999/html">
  <div class="table-page">
    <GiTable
        row-key="id"
        title="双选会企业岗位列表"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
    >
      <template #custom-left>
        <a-input v-model="queryForm.title" placeholder="请输入岗位名称" allow-clear @change="search">
          <template #prefix>
            <icon-search/>
          </template>
        </a-input>
        <a-input v-model="queryForm.salary" placeholder="请输入薪水" allow-clear @change="search">
          <template #prefix>
            <icon-search/>
          </template>
        </a-input>
        <a-input v-model="queryForm.location" placeholder="请输入工作地点" allow-clear @change="search">
          <template #prefix>
            <icon-search/>
          </template>
        </a-input>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click="searchPostDetail(record)">查看岗位详情</a-link>
          <a-link @click="sendResume(record.id)">投递简历</a-link>
        </a-space>
      </template>
    </GiTable>
  </div>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      岗位详情
    </template>
    <h3>岗位名称:</h3> {{ detailForm.title }} <br/><br/>
    <h3>岗位描述:</h3> {{ detailForm.description }}<br/><br/>
    <h3>任职要求:</h3> {{ detailForm.requirements }}<br/><br/>
  </a-modal>
  <a-modal v-model:visible="sendResumeVisible" @ok="sendResumeHandleOk" @cancel="sendResumeHandleCancel" okText="投递"
           draggable>
    <template #title>
      请选择简历并投递
    </template>
    <a-select v-model="selectedOptions" style="margin: 0 auto" placeholder="请选择简历" :filter-option="false">
      <a-option v-for="item of options" :value="item.id">{{ item.name }}</a-option>
    </a-select>
  </a-modal>
</template>

<script setup lang="ts">
import {
  getUserInfo,
  type JobPositionQuery,
  listJobPosition,
  listResume,
  listResumeByStudentId,
  type ResumeQuery
} from '@/apis'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useForm, useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'
import {useUserStore} from "@/stores";
import {Message} from "@arco-design/web-vue";
import {addJobPositionResume} from "@/apis/jobfair/jobPositionResume";

defineOptions({name: 'JobPosition'})
const route = useRoute();
const companyId = route.query.companyId; // 获取传递的 id
const jobfairId = route.query.jobfairId;

const queryForm = reactive<JobPositionQuery>({
  companyId: companyId as any,
  jobFairId: jobfairId as any,
  title: "",
  salary: "",
  location: "",
  sort: ['createTime,desc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listJobPosition({...queryForm, ...page}), {immediate: true})

const columns: TableInstanceColumns[] = [
  {title: '名称', dataIndex: 'title', slotName: 'title'},
  {title: '薪水', dataIndex: 'salary', slotName: 'salary'},
  {title: '工作地点', dataIndex: 'location', slotName: 'location'},
  {
    title: '操作',
    slotName: 'action',
    width: 200,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置
const reset = () => {
  queryForm.title = ""
  queryForm.salary = ""
  queryForm.location = ""
  search()
}

// 查看参会企业详情
const visible = ref(false);
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
}
const detailForm = {
  title: "",
  description: "",
  requirements: "",
}
const searchPostDetail = async (record: any) => {
  visible.value = true;
  detailForm.title = record.title
  detailForm.description = record.description
  detailForm.requirements = record.requirements
}


// 投递简历
const sendResumeVisible = ref(false);
const selectedOptions = ref([]);
const postId = ref();
const sendResumeHandleOk = async () => {
  sendResumeVisible.value = false;
  // todo 向后端发送数据
  const resumeId = selectedOptions.value
  const res = await addJobPositionResume({positionId: postId.value, resumeId: resumeId})
  if (res.code === 200) {
    Message.success("投递成功")
  } else {
    Message.error(res.msg)
  }
};
const sendResumeHandleCancel = () => {
  sendResumeVisible.value = false;
}
const options = ref();
const sendResume = async (id: string) => {
  // 查询我的简历并选择一份简历
  const userStore = useUserStore()
  const LoginUser = userStore.userInfo
  const res = await listResumeByStudentId(LoginUser.id)
  if (res.code === 200) {
    sendResumeVisible.value = true
    // 将获取的数据给options
    options.value = res.data
    postId.value = id
  } else {
    Message.error(res.msg)
  }
}
</script>

<style lang="scss" scoped></style>
